<html>
<head>
    <title>Exhibit - Work Task Example</title>
    <script src="http://static.simile.mit.edu/exhibit/api-2.1.0/exhibit-api.js" type="text/javascript"></script>
    <script src="http://static.simile.mit.edu/exhibit/extensions-2.1.0/time/time-extension.js" type="text/javascript"></script>
    <script src="http://static.simile.mit.edu/exhibit/extensions-2.1.0/map/map-extension.js?gmapkey=ABQIAAAAQmOB4vWaMt4h1gzf0PJMJhSNKgEGyvO64ZhzW3wuPmcFt4dUfxSpgzTAOEtgectjIOGEo9XoKsK7KQ" type="text/javascript"></script>
    <link rel="exhibit/data" type="application/json" href="work-task-example-2.js"/>
    <style type="text/css">
        div.exhibit-toolboxWidget-popup { display: none; }
        div.exhibit-legendWidget { display: none; }
        div.exhibit-views-header { display: none; }
    </style>
</head> 
<body>
<table width="100%" border="0">
<tr valign="top">
    <td>
        <div ex:role="coordinator" id="worktask"></div> 
        <div ex:role="coder" ex:coderClass="Color" id="priority-colors">
            <span ex:color="#cc0000">High</span>
            <span ex:color="#ff7c00">Medium</span>
            <span ex:color="#00aa00">Low</span>
        </div>
        <div ex:role="view" ex:viewClass="Timeline" 
                ex:start=".planned-start-date"
                ex:end=".planned-end-date"
                ex:timelineHeight="200"
                ex:selectCoordinator="worktask"
                ex:colorCoder="priority-colors"
                ex:colorKey=".priority"
                ex:showSummary="false">
            <table ex:role="exhibit-lens">
            <tr>
                <td>
                    <div ex:content=".label"></div>
                    <div>
                        <b>Planned Start:</b> <span ex:content=".planned-start-date"></span>
                    </div>
                    <div>
                        <b>Planned End:</b> <span ex:content=".planned-end-date"></span>

                    </div>
                </td>
            </tr>
            </table>
        </div>
        <div ex:role="view"
            ex:viewClass="Map"
            ex:lat=".latitude"
            ex:lng=".longitude"
            ex:center="42.335743,-71.105138"
            ex:mapHeight="300"
            ex:zoom="6"
            ex:selectCoordinator="worktask"
            ex:colorCoder="priority-colors"
            ex:colorKey=".priority"
            ex:bubbleWidth="200">
            <table ex:role="exhibit-lens">
            <tr>
                <td>
                    <div ex:content=".label"></div>
                    <div>
                        <b>Building:</b> <span ex:content=".building"></span>
                    </div>
                </td>
            </tr>
            </table>
        </div>
    </td>
    <td width="200px">
    <div>Search:</div>
    <div ex:role="facet" ex:facetClass="TextSearch" ex:expressions=".label, .building"></div>
    <div ex:role="facet" ex:expression=".priority" ex:facetLabel="Priority" ex:fixedOrder="High;Medium;Low"></div>
    <div ex:role="facet" ex:expression=".building" ex:facetLabel="Building"></div>
    </td>
</tr>
</table>
</body>
</html>

